<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝轮播图改变src</title>
</head>
<style>
    .all{
        width: 960px;
        height: 350px;
        margin: auto;
        position: relative;
        overflow: hidden;
    }
    .left{
        width: 50px;
        height: 80px;
        position: absolute;
        left: 0;
        top: 100px;
        z-index: 1;
    }
    .left:hover,.right:hover{ background-color: rgba(0,0,0,0.2);}
    .right{
        width: 50px;
        height: 80px;
        position: absolute;
        top: 100px;
        right: 0;
    }
    .left>p{
        text-align: center;
        font-size: 50px;
        position: absolute;
        top: -55%;
        left: 0;
    }
    .right>p{
        text-align: center;
        font-size: 50px;
        position: absolute;
        top: -55%;
        right: -5px;
    }
    .change{
        width: 960px;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .point{
        width: 15px;
        height: 15px;
        border: 2px solid #000;
        border-radius: 50%;
    }
    .img{
        display: inline-block;
        white-space: nowrap;
        font-size: 0;
        width: 960px;
        transition: all 0.8s;/*渐变*/
    }
</style>
<body>
    <div class="all">
        <div class="left"><p class="p-left">&lt;</p></div>
        <div class="img">
            <img src="./img/01.jpeg" />
            <img src="./img/02.jpeg" />
            <img src="./img/03.jpeg" />
            <img src="./img/04.jpeg" />
        </div>
        <div class="right"><p class="p-right">&gt;</p></div>
        <div class="change">
            <!-- 自动生成圆点的标签格式
                <div class="point" dataset-i='i'></div> -->
        </div>
    </div>  
    <script>
        let img=document.querySelector('.img')
        let change=document.querySelector('.change')
        let all=document.querySelector('.all')
        let point=[]//图片下方的圆点集合
        let index=1//需要控制的值
        let lastIndex=1//上一次操作的值
        for(let i=0;i<img.children.length;i++){//自动生成圆点
            point[i]=document.createElement('div')
            point[i].className='point'
            point[i].dataset.i=i
            change.appendChild(point[i])
        }
        point[0].style['background-color']='black'
        function f(){//圆点样式随图片的变动而变动/////////////////
            point.forEach((e,i)=>{
                    if(i!=index-1)e.style['background-color']='white'
                })
            point[index-1].style['background-color']='black'
        }
        //克隆第一张和最后一张（为了无缝切换）
        img.insertBefore(img.lastElementChild.cloneNode(true),img.firstElementChild);
        img.appendChild(img.children[1].cloneNode(true));
        //位置移动到第2张
        img.style.transform='translate(-100%)'
        //加载js时会出现过渡效果，先移动，再恢复
        setTimeout(()=> {
            img.style.transition='transform 0.5s'
        },100)
        all.addEventListener('click',(e)=>{//事件代理
            if(e.target.className==='point'){//点击圆点///////////
                let p=e.target.dataset.i//字符串
                img.style.transform=`translate(-${(+p+1)}00%)`
                point.forEach((e,i)=>{
                    if(i!=p)e.style['background-color']='white'
                })
                point[p].style['background-color']='black'
                index=+p+1
            }
            if(e.target.className==='left'||e.target.className==='p-left'){//点击左箭头  
                img.style.transform='translate(-'+--index+'00%)' 
                //达到最后一张，跳转到第二张
                if(index<1){
                    index=img.children.length-2
                    //等待过渡动画结束
                    img.addEventListener("transitionend",()=>{
                        //关闭过渡效果
                        img.style.transition='none'
                        img.style.transform='translate(-'+index+'00%)'
                        //更新元素的新样式
                        window.getComputedStyle(img).transform
                        img.style.transition='transform 0.8s'
                    },{once:true})//只绑定一次
                }                 
                f()
            }
            if(e.target.className==='right'||e.target.className==='p-right'){//点击右箭头
                img.style.transform = `translateX(-${++index}00%)`;
                //达到最后一张，跳转到第二张
                if(index>img.children.length-2){
                    index=1 
                    //等待过渡动画结束
                    img.addEventListener("transitionend",()=>{
                        //关闭过渡效果
                        img.style.transition='none'
                        img.style.transform='translate(-100%)'
                        //更新元素的新样式
                        window.getComputedStyle(img).transform
                        img.style.transition='transform 0.8s'
                    },{once:true})//只绑定一次
                }   
                f()
            }
        })
        let timer
        function f1() {
            timer=setInterval(()=>{//自动轮播///////////////////////////////////////
                img.style.transform = `translateX(-${++index}00%)`;
                //达到最后一张，跳转到第二张
                if(index>img.children.length-2){
                    index=1 
                    //等待过渡动画结束
                    img.addEventListener("transitionend",()=>{
                        //关闭过渡效果
                        img.style.transition='none'
                        img.style.transform='translate(-100%)'
                        //更新元素的新样式
                        window.getComputedStyle(img).transform
                        img.style.transition='transform 0.8s'
                    },{once:true})//只绑定一次
                }   
            f()
            },1500)
        }
        f1()
        all.addEventListener('mouseenter', ()=>{//移入停止轮播
            clearInterval(timer)
        })
        all.addEventListener('mouseleave', ()=>{//移出继续自动轮播
            f1()
        })
        document.addEventListener('visibilitychange',()=>{//界面不显示时不轮播
            if(document.hidden)clearInterval(timer)//判断网页是否被隐藏
            else {
            clearInterval(timer)
            f1()
        }
        })
    </script> 
</body>
</html>